<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>javascript</title>

</head>
<!--
js 是web开发者必学的三种语言之一
HTML  定义网页的内容
CSS   规定网页的布局
JavaScript  对网页行为进行编程
js 能够改变Html内容 getElementById() 是多个js 方法之一,使用该方法查找id=demo的html元素
js 同时接受双引号和单引号
通过改变 img标签的src属性source来改变一张html图像
图片
https://www.w3school.com.cn/i/eg_bulbon.gif
在html中 js 代码必须位于script标签中, 旧的js中也许会有type属性 但是type属性不是必需的,js是html中的默认脚本语言
js 函数是一种js代码块,他可以在调用时被执行,例如当发生事件时调用函数,当用户点击按钮时
脚本可以放置在html页面的body 或 head部分中
提示 : 把脚本放置于body元素的底部,可以改善显示速度,因为脚本编译会拖慢显示
脚本可放置与外部文件中
外部 js的优势
在外边文件中放置脚本有如下优势:
  分离html和代码
  使得html和js更易于阅读和维护
  已缓存的js文件可以加速页面加载

由于js 不提供任何内建的打印或显示函数
所以为了显示 js显示方案
js能够以不同方式显示数据
使用window.alert() 写入警告框
使用document.write() 写入HTML输出
使用 innerHTML 写入HTML元素
使用 console.log() 写入浏览器控制台

更改 html元素的innerHTML 属性是在HTML 中显示数据的常用方法
注意在html文档完全加载后使用 document.write() 将删除所有已有的html

使用window.alert() 写入警告框
  在页面加载前后进行渲染,出现警告框
使用document.write() 写入HTML输出
  在页面元素加载完或者元素点击后进行页面加载输出
使用 innerHTML 写入HTML元素
  改变页面元素或者是展示内容
使用 console.log() 写入浏览器控制台
  将日志内容写入浏览器的控制台中

在html中 js语句是由web浏览器执行的指令.
计算机程序是由计算机执行的一系列指令,在编程语言中这些编程指令被称为语句 ,js程序就是一系列的编程语句
js语句由以下构成 值 运算符 表达式 关键词 注释
这条语句告诉浏览器 id=demo 的html元素中输出hell kitty
大多数js程序都包含许多js语句,这些语句会按照编写的顺序逐一执行,js程序被称为js代码
使用分号 ;分隔 js语句
也可以在一行中写多条语句
a=5;b=6;c=a+b;
提示以分号结束语句不是必需的,但是建议还是加上用于方便阅读
js会忽略多个空格 可以想脚本添加空格增强可读性 在运算符旁添加空格是个好习惯
js 为了达到最佳的可读性,程序员常常喜欢把代码控制在80个字符以内 ,如果js过长,对其进行拆行的最佳位置是某个运算符
js代码块 可以使用花括号 {} 组合在代码块中,代码块的作用是定义同一执行的语句
如
  function myFunction(){
  document.getElementById("demo").innerHTML="Hello kitty"
  document.getElementById("myDIV").innerHTML="how are you"
  }
代码块中使用4个空格的缩进
关键词
break	终止 switch 或循环。
continue	跳出循环并在顶端开始。
debugger	停止执行 JavaScript，并调用调试函数（如果可用）。
do ... while	执行语句块，并在条件为真时重复代码块。
for	标记需被执行的语句块，只要条件为真。
function	声明函数。
if ... else	标记需被执行的语句块，根据某个条件。
return	退出函数。
switch	标记需被执行的语句块，根据不同的情况。
try ... catch	对语句块实现错误处理。
var	声明变量。
js的关键词是指保留的单词,保留词无法用作变量名

js语句定义两种类型的值,混合值和变量值
混合值称为字面量 变量值被称为变量
js 字面量 书写混合值最重要的规则是:写数值有无小数点均可 字符串时文本时由双引号或单引号包围
js变量用于存储数据值 js中使用var 关键词来声明变量 =等号用于为变量赋值
js使用算数运算符 来计算值 ,使用赋值运算符 = 向变量赋值
js 表达式是值 变量 和运算符的组合 计算结果是值
js 关键词用于标识被执行的动作 var关键词告知浏览器创建新的变量
如 var x = 7 + 8 ;
js 注释 并非所有的js语句都被执行 双斜杠 // 或者/* 与*/ 之间的代码都被视为注释 注释被忽视,不会被执行
js 标识符 是名称,在js中标识符用于命名变量 以及关键词,函数和标签
在javascript中首字符必须 是字母,下划线- 或者美元符号$
连串的字符可以是字母,数字下划线或者美元符号
提示数值不可以作为首字符,这样js就能轻松区分标识符合数值
所有的js标识符对大小写敏感 变量 lastName 和 lastname 是两个不同的变量
js 不会把 var 或 Var 当成关键词 var
js 与驼峰式大小写
连字符
first-name,last-name
注意在js中不能使用连字符 它是为了减法预留的
下划线
first_name
驼峰式大小写
FirstName
程序员倾向于使用以小写字母开头额度驼峰大小写
firstName

js注释 用于解释 javascript代码 增强其可读性
js 注释可以用于测试替代代码时阻止执行
单行注释 以// 开头 任何位于//与行末之间的文本都会被js忽略不会执行
也可以用在每行结尾处使用单行注释来解释代码
多行注释 以/* 开头, 以*/结尾

js的变量
var price1 =7 ;
提示js变量是存储数据值的容器

js标识符,所有js变量以唯一的名称的标识,这些唯一的名称称为标识符
标识符可以是短名称 x 或者y ,或者更具体的描述性名称 age,sun 等
构造变量名称唯一标识符的通用规则是
  名称可包含字母 ,数字,下划线,和美元符号
  名称必须以字母开头
  名称也可以$ 和_开头
  名称对大小写敏感 y和Y是不同的变量
  保留字无法用于变量名称

在javascript中等号 是赋值运算符 而不是等于运算符
x=x+5
在js中的等于运算符是 ==

js变量可存放数值 100 以及文本值
在编程中文本值被称为字符串,字符串被包围在双引号或者单引号中,数值不用引号,如果将数值放在引号中会被视为文本字符串

var pi = 3.14;
var person = 'Bill Gates'

在java中创建变量被称为声明 变量 ,可以通过var 关键词 来声明js变量
var carName
声明后 变量是没有值的 ,技术上它的值是undefined
如果需进行赋值给变量,使用等号
carName = 'porsche'
ts: 在脚本的开头声明所有变量是个好习惯

在一条语句中声明许多变量 , 以var作为语句的开头 ,并以逗号分隔变量
var person='Jin ran',carName='porsche',price=15000

value = undefined
在计算机程序中,被声明的变量经常是不带值的,值是需被计算的内容,或者之后被提供的数据 如数据输入
不带值的变量 值将是undefined
如 var carName

重复声明 js变量 如果再次声明某个js变量 将会丢它的值
在执行语句后值还是第一次赋值的内容
var carName = 'porsche';
var carName ;

js变量进行算术运算 使用= 和+ 之类的运算符
var x = 3+5+8;
字符串也可以使用加号 但是字符串将被级联
var x = "Bill" + ""+"Gates";
如果把数值放入引号中,其余数值会被视为字符串并被级联
var x = 3+ 5+ "8" // "88"

js 新的关键词 let 和const
这两个关键词在js中提供了块作用域block scope 变量 和常量 在之前js只有两种类型的作用域 全局作用域和函数作用域

全局作用域
全局 在函数之外 声明的变量拥有全局作用域,
实例
var carName = 'porsche'
//此处的代码可以使用carName
function myFunction(){
  // 此处的代码也可以使用 carName
}
全局变量可以在javascript程序的中的任何位置访问

函数作用域
局部函数内 声明的变量拥有函数作用域
实例
// 此处代码不可以使用carName
function myFunction(){
  var carName = "porsche";
  //代码内可以使用carName
}
此处代码不可以使用carName
局部变量只能在它们被声明的函数内访问

js块作用域
通过 var关键词声明的变量没有块作用域 在块{}内声明的变量可以从块之外进行访问
实例
{
  var x =10;
}
此处可以使用x
在之前是没有块作用域的,可以使用let 关键词声明拥有块作用域的变量
在块{} 内声明的变量,无法从块外访问
实例
{
  let x =10;
}
此处不可以使用x

重新声明变量 使用var 关键词重新声明变量会带来问题
在块中重新声明变量也将重新声明块外的变量
实例
var x = 10;
//此处x为10
{
  var x =6;
  // 此处x为6
}
//此处x为6

使用let关键字重新声明变量可以解决这个问题
在块中重新声明变量不会重新声明块外的变量
实例
var x= 10;
// 此处x 为10
{
  let x =6;
  此处x为6
}
//此处x为10

循环作用域
在循环中使用var
实例
var i = 7;
for (var i =0;i<10;i++){
  //一些语句
}
此处 i =10

在循环中使用let
实例
let i = 7;
for (let i =0;i<10;i++){
  一些语句
}
此处的i=7
在第一个例子中 在循环中的变量使用var 重新声明了循环之外的变量
在第二个例子中,在循环中使用的变量使用let 并没有重新声明循环外的变量
如果在循环中使用let 声明了变量 i 那么只有在循环内,变量i才是可见的

函数作用域
在函数内声明变量时,使用var和let很相同,它们都有函数作用域:
function myFunction(){
var carName = 'porsche';  //函数作用域
}
function myFunction(){
let carName = 'porsche';  //函数作用域
}

全局作用域
如果在块外声明,那么var和let也很相似 它们都拥有全局作用域
var x =10 ;  // 全局作用域
let y =10 ;  // 全局作用域


html中的全局变量
使用js 的情况下,全局作用域是 javascript 环境
在html中 全局作用域是window对象
通过var关键词 定义的全局变量属于window对象
实例
var carName = 'porsche' ;
// 此处代码可以使用 window.carName

通过let关键词定义的全局变量不属于window对象
实例
let carName = "porsche";
// 此处的代码不可以使用window.carName

重新声明
允许在程序的任何位置使用 var 重新声明 JavaScript 变量：
var x = 10;

// 现在，x 为 10

var x = 6;

// 现在，x 为 6

在相同的作用域，或在相同的块中，通过 let 重新声明一个 var 变量是不允许的：
var x = 10;       // 允许
let x = 6;       // 不允许

{
  var x = 10;   // 允许
  let x = 6;   // 不允许
}
在相同的作用域，或在相同的块中，通过 let 重新声明一个 let 变量是不允许的：
let x = 10;       // 允许
let x = 6;       // 不允许

{
  let x = 10;   // 允许
  let x = 6;   // 不允许
}

在相同的作用域，或在相同的块中，通过 var 重新声明一个 let 变量是不允许的：
let x = 10;       // 允许
var x = 6;       // 不允许

{
  let x = 10;   // 允许
  var x = 6;   // 不允许
}

在不同的作用域或块中，通过 let 重新声明变量是允许的：
let x = 6;       // 允许

{
  let x = 7;   // 允许
}

{
  let x = 8;   // 允许
}

提升 通过var声明的变量会提升到顶端
因此可以在声明变量之前就使用它
实例
//在此处 可以使用carName
var carName

通过let 定义的变量不会被提升到顶端
在声明 let 变量之前就使用它会导致 ReferenceError。
变量从块的开头一直处于“暂时死区”，直到声明为止：
// 在此处，您不可以使用 carName
let carName;



-->
<body>
<div>
  <h2>我的第一段 javascript</h2>
  <button type="button" onclick="document.getElementById('demo7').innerHTML=Date()">点击这里来显示日期和时间</button>
  <p id="demo7"></p>
  <br>
  <button type="button" onclick='document.getElementById("demo7").innerHTML="Hello JavaScript!"'>点击我!</button>
  <p id="demo1"></p>
  <br>
  <p>js改变图像的src属性值</p>
  <button onclick="document.getElementById('myImage').src='https://www.w3school.com.cn/i/eg_bulbon.gif'">开灯</button>
  <img src="https://www.w3school.com.cn/i/eg_bulboff.gif" alt="bulbous" id="myImage" border="0"
       style="text-align:center">
  <button onclick="document.getElementById('myImage').src='https://www.w3school.com.cn/i/eg_bulboff.gif'">关灯</button>
  <br>
  <p id="demo2">js 能够改变html元素的样式</p>
  <button type="button" onclick="document.getElementById('demo2').style.fontSize='35px'">点击我!</button>
  <br>
  <p id="demo3">js 能够隐藏html元素</p>
  <button type="button" onclick="document.getElementById('demo3').style.display='none'">点击我!</button>
  <br>
  <p>JavaScript 能够显示隐藏的 HTML 元素。</p>
  <p id="demo4" style="display:none">Hello JavaScript!</p>
  <button type="button" onclick="document.getElementById('demo4').style.display='block'">
    点击我！
  </button>
  <br>
  <h2>body中的Javascript</h2>
  <p id="demo5"></p>
  <script>document.getElementById('demo5').innerHTML="我的第一段 JavaScript"</script>
  <h1>一张网页</h1>
  <p id="demo6">一个段落</p>
  <button type="button" onclick="myFunction()">试一试</button>
  <br>
  <h2>使用 innerHTML 定义HTML内容</h2>
  <p id="demo_inner_html"></p>
  <br>
  <h2>使用 write() 写入数据</h2>
  <p >我的第一个段落</p>
  <br>
<!--  当执行document.writer后将删除所有已有的html,注意document.write方法仅仅用于测试-->
  <button onclick="document.write(22+9)">试一试</button>
  <br>
  <p>使用警告框来显示数据集,会在加载页面前进行打印警告框</p>
  <br>
  <p>使用console.log()方法显示数据</p>
  <br>
  <h2>使用变量赋值的方式展示文案</h2>
  <p id="carDemo"></p>
</div>
<script>window.alert(7+8)</script>
<script src="js_demo1.js"></script>
</body>
</html>
